<html>
  <head>
  <title></title>
  <style>
    
    
    table {
      font:system;
      height:*; width:500px; 
      border:1px solid black; 
      flow:table-fixed; // ATTN: this value is mission critical!
    }
    
    table > tbody, table > tbody { border-spacing:0; }

    table > tbody 
    { 
      overflow: scroll-indicator;
      size:*;
    }

    table > tbody > tr {
      behavior:form; // mission critical: each repeated child is treated as a form so it can accept object values  
    } 
    
    table > tbody > tr.highlighted {
      background: #da9;
    }

    table > tbody > tr:hover {
      background: #bcd;
    }

    table > tbody > tr:current {
      background:gold;
    } 

    table td:nth-child(2),   
    table th:nth-child(2) { width:*; }

    table td:last-child,   
    table th:last-child { width:8em; }
      
  </style>
  <script type="text/tiscript">
  
  include "../vlist.tis";
  
  function self.ready() {
  
    var records = new Array(500);

    function imageUrl(i) {
      switch(i) {
        case 0: return "../../ideas/carousel/images/199480111_87d4cb3e38_s.jpg";
        case 1: return "../../ideas/carousel/images/199481072_b4a0d09597_s.jpg";
        case 2: return "../../ideas/carousel/images/199481087_33ae73a8de_s.jpg";
        case 3: return "../../ideas/carousel/images/199481108_4359e6b971_s.jpg";
        default:
          if(i & 1) return "../../ideas/carousel/images/199481143_3c148d9dd3_s.jpg";
          return "../../ideas/carousel/images/199481203_ad4cdcf109_s.jpg";
      }
    }
    
    for(var i = 0; i < records.length; ++i)
      records[i] = {
        index: i, 
        caption:"Item", 
        status:"",
        imageUrl: imageUrl(i) //(i & 1 ? "sciter:copy.png": "sciter:cut.png") 
      };

    var n = records.length;
    var p = 0;
    
    function setupItemView(recordNo, record, itemEl) {
      itemEl.$(img).attributes["src"] = record.imageUrl; // or whatever you have there
      itemEl.$(td.custom).$content({record.caption} - {record.index});
    }    
   
    var vlist = VirtualList {
      container     : $(table>tbody),
      bufferSize    : 20, // records in sliding window
      setupItemView : setupItemView
    };
    
    // feed it by these records
    vlist.value = records;
    
    $(button#add-record) << event click {
      var i = records.length;
      records.push {
        index: i, 
        caption:"New item", 
        status:"",
        imageUrl: imageUrl(i);
      }
    }

    $(button#change-record) << event click {
      var i = 0;
      records[i] = {
        index: i, 
        caption:"Changed item", 
        status:"",
        imageUrl: imageUrl(i);
      };
    }

    $(button#update-record) << event click {
      records[0].caption = records[0].caption + "*";
    }
    
  }
  
  </script>
  </head>
<body>

  <h2>Custom setupItemView demo</h2>
  
  <p>Records array is created with 500 records initially. Record view is configured by custom setupItemView() function.</p> 

  <button#add-record>Add Record</button>
  <button#change-record>Change first record</button>
  <button#update-record>Update first record</button>

  <table>
    <thead>
      <tr><th(index)>index</th><th(caption)>caption</th><th(status)>status</th><th>Image</th><th>custom content</th></tr>
    </thead>
    <tbody>
      <tr><td(index)></td><td(caption)></td><td(status)></td><td><img/></td><td.custom></td></tr>
    </tbody>
  </table>
 
  
</body>
</html>
